<!DOCTYPE html>
<html style="width: 100%">
<head>
	<meta charset="utf-8">
	<title>博客首页</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<link rel="icon" href="favicon.ico">
	<link rel="stylesheet" href="layui/css/layui.css" media="all" />

	<style>
		*{margin: 0;padding: 0;}
		.fly-header {
			position: fixed;
			left: 0;
			top: 0;
			z-index: 10000;
			width: 100%;
			height: 60px;
			border-bottom: 1px solid #404553;
			border-right: 1px solid #404553;
			border-radius: 0;
		}

		.fly-header {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 10000;
			width: 100%;
			height: 60px;
			border-bottom: 1px solid #404553;
			border-right: 1px solid #404553;
			border-radius: 0;
		}

		.fly-logo {
			position: absolute;
			left: 15px;
			top: 11px;
		}
		.fly-nav {
			margin-left: 200px;
		}
		.fly-list li {
			position: relative;
			height: 45px;
			line-height: 22px;
			padding: 15px 15px 15px 15px;
			border-bottom: 1px dotted #e2e2e2;
			font-size: 18px;
			font-weight: bold;
		}
		.fly-item{
			padding: 10px 15px 0px 15px;
		}
		.fly-footer {
			margin: 50px 0 0;
			padding: 20px 0 30px;
			line-height: 30px;
			text-align: center;
			color: #737573;
			border-top: 1px solid #e2e2e2;
		}
	</style>

</head>
<body style="width: 100%;background-color: #f4f5f5" >


<div id="header" class="fly-header" style="background-color: #393D49">
	<div class="layui-container">
		<a class="fly-logo" href="#">
			<img src="logo.png" alt="layui">
		</a>
		<ul class="layui-nav fly-nav" lay-filter="">
			<li class="layui-nav-item">
				<a href="javascript:;">前端开发</a>
				<dl class="layui-nav-child"> <!-- 二级菜单 -->
					<dd><a href="">HTML</a></dd>
					<dd><a href="">CSS</a></dd>
					<dd><a href="">JS</a></dd>
				</dl>
			</li>
			<li class="layui-nav-item">
				<a href="javascript:;">后端开发</a>
				<dl class="layui-nav-child"> <!-- 二级菜单 -->
					<dd><a href="">JAVA</a></dd>
					<dd><a href="">PHP</a></dd>
				</dl>
			</li>
			<li class="layui-nav-item">
				<a href="javascript:;">移动开发</a>
				<dl class="layui-nav-child"> <!-- 二级菜单 -->
					<dd><a href="">Android</a></dd>
					<dd><a href="">Ios</a></dd>
				</dl>
			</li>
			<li class="layui-nav-item">
				<a href="javascript:;">数据库</a>
				<dl class="layui-nav-child"> <!-- 二级菜单 -->
					<dd><a href="">Mysql</a></dd>
					<dd><a href="">Orale</a></dd>
				</dl>
			</li>
			<li class="layui-nav-item">
				<a href="javascript:;">前言技术</a>
				<dl class="layui-nav-child"> <!-- 二级菜单 -->
					<dd><a href="">区块链</a></dd>
					<dd><a href="">人工智能</a></dd>
				</dl>
			</li>
			<li class="layui-nav-item"><a href="">关于</a></li>
		</ul>
	</div>

</div>

<div id="container" class="layui-container" style="padding-top: 80px;min-height: 750px">
	<div class="layui-row">
		<div class="layui-col-md8">
			<div class="layui-card" style="margin-right: 10px">
				<div class="layui-card-header">置顶</div>
				<div class="layui-card-body">
					<ul class="fly-list">
						<li>
							<a href="#">
								<div>Java 帝国之Java bean</div>
								<div><span class="layui-badge layui-bg-blue">后端</span><span  class="layui-badge layui-bg-gray"  style="margin-left: 20px">2018-07-26</span><span  class="layui-badge-rim"  style="margin-left: 20px">100次阅读</span></div>
							</a>
						</li>
						<li>
							<a href="#">
								<div>Java集合——LinkedList</div>
								<div><span class="layui-badge layui-bg-blue">后端</span><span  class="layui-badge layui-bg-gray"  style="margin-left: 20px">2018-07-26</span><span  class="layui-badge-rim"  style="margin-left: 20px">100次阅读</span></div>
							</a>
						</li>
						<li>
							<a href="#">
								<div>SpringMVC+MyBatis配置</div>
								<div><span class="layui-badge layui-bg-blue">后端</span><span  class="layui-badge layui-bg-gray"  style="margin-left: 20px">2018-07-26</span><span  class="layui-badge-rim"  style="margin-left: 20px">100次阅读</span></div>
							</a>
						</li>
						<li>
							<a href="#">
								<div>SpringBoot视频教程</div>
								<div><span class="layui-badge layui-bg-blue">后端</span><span  class="layui-badge layui-bg-gray"  style="margin-left: 20px">2018-07-26</span><span  class="layui-badge-rim"  style="margin-left: 20px">100次阅读</span></div>
							</a>
						</li>

						<li>
							<a href="#">
								<div>研磨JAVA设计模式</div>
								<div><span class="layui-badge layui-bg-blue">后端</span><span  class="layui-badge layui-bg-gray"  style="margin-left: 20px">2018-07-26</span><span  class="layui-badge-rim"  style="margin-left: 20px">100次阅读</span></div>
							</a>
						</li>

					</ul>
				</div>
			</div>

			<div class="layui-card" style="margin-right: 10px">
				<div class="layui-card-header">JAVA</div>
				<div class="layui-card-body">
					<ul class="fly-list">
						<li>
							<a href="#">
								<div>JAVA入门</div>
								<div><span class="layui-badge layui-bg-blue">后端</span><span  class="layui-badge layui-bg-gray"  style="margin-left: 20px">2018-07-26</span><span  class="layui-badge-rim"  style="margin-left: 20px">100次阅读</span></div>
							</a>
						</li>
						<li>
							<a href="#">
								<div>SpringBoot统一处理异常</div>
								<div><span class="layui-badge layui-bg-blue">后端</span><span  class="layui-badge layui-bg-gray"  style="margin-left: 20px">2018-07-26</span><span  class="layui-badge-rim"  style="margin-left: 20px">100次阅读</span></div>
							</a>
						</li>
						<li>
							<a href="#">
								<div>SpringMVC+MyBatis配置</div>
								<div><span class="layui-badge layui-bg-blue">后端</span><span  class="layui-badge layui-bg-gray"  style="margin-left: 20px">2018-07-26</span><span  class="layui-badge-rim"  style="margin-left: 20px">100次阅读</span></div>
							</a>
						</li>
						<li>
							<a href="#">
								<div>SpringBoot视频教程</div>
								<div><span class="layui-badge layui-bg-blue">后端</span><span  class="layui-badge layui-bg-gray"  style="margin-left: 20px">2018-07-26</span><span  class="layui-badge-rim"  style="margin-left: 20px">100次阅读</span></div>
							</a>
						</li>

						<li>
							<a href="#">
								<div>研磨JAVA设计模式</div>
								<div><span class="layui-badge layui-bg-blue">后端</span><span  class="layui-badge layui-bg-gray"  style="margin-left: 20px">2018-07-26</span><span  class="layui-badge-rim"  style="margin-left: 20px">100次阅读</span></div>
							</a>
						</li>

						<li>
							<a href="#">
								<div>SpringBoot返回json和xml</div>
								<div><span class="layui-badge layui-bg-blue">后端</span><span  class="layui-badge layui-bg-gray"  style="margin-left: 20px">2018-07-26</span><span  class="layui-badge-rim"  style="margin-left: 20px">100次阅读</span></div>
							</a>
						</li>
					</ul>
					<hr class="layui-bg-blue">
					<div style="text-align: center">
						<div class="laypage-main">
							<a href="#" class="layui-btn layui-btn-primary">加载更多</a>
						</div>
					</div>
				</div>
			</div >
		</div>

		<div class="layui-col-md4">
			<div class="layui-card">
				<div class="layui-card-header">个人介绍</div>
				<div class="layui-card-body">
					<div style="margin: 5px auto;text-align: center"><img src="headimg.png" width="100px" /></div>
					<div style="margin-left: 10px;text-indent: 2em;">身处在前端社区的繁荣之下，我们都在有意或无意地追逐。而 layui 偏偏回望当初，奔赴在返璞归真的漫漫征途，自信并勇敢着，追寻于原生态的书写指令，试图以最简单的方式诠释高效</div>
				</div>
			</div>

			<div class="layui-card">
				<div class="layui-card-header">热门标签</div>
				<div class="layui-card-body">

						<div class="layui-row layui-col-space10" style="text-align: center">
							<div class="layui-col-md4">
								<a href="#" class="layui-btn    layui-btn-xs layui-btn-radius layui-btn-primary">开源</a>
							</div>
							<div class="layui-col-md4">
								<a href="#" class="layui-btn    layui-btn-xs layui-btn-radius layui-btn-primary">MVC</a>
							</div>
							<div class="layui-col-md4">
								<a href="#" class="layui-btn   layui-btn-xs layui-btn-radius layui-btn-primary">Spring</a>
							</div>
						</div>

					<div class="layui-row layui-col-space10" style="text-align: center">
						<div class="layui-col-md4">
							<a href="#" class="layui-btn    layui-btn-xs layui-btn-radius layui-btn-primary">算法</a>
						</div>
						<div class="layui-col-md4">
							<a href="#" class="layui-btn    layui-btn-xs layui-btn-radius layui-btn-primary">Mybatis</a>
						</div>
						<div class="layui-col-md4">
							<a href="#" class="layui-btn   layui-btn-xs layui-btn-radius layui-btn-primary">区块链</a>
						</div>
					</div>

				</div>
			</div>

			<div class="layui-card">
				<div class="layui-card-header">友情链接</div>
				<div class="layui-card-body">
					<ul>
						<li class="fly-item">
							<a href="http://www.zhanyisc.com" class="layui-btn layui-btn-sm layui-btn-primary">
								<i class="layui-icon">&#xe64c;</i> 展谊科技官网
							</a>
						</li>
						<li class="fly-item">
							<a href="http://www.zhanyisc.com" class="layui-btn layui-btn-sm layui-btn-primary">
								<i class="layui-icon">&#xe64c;</i> 展谊科技官网
							</a>
						</li>
						<li class="fly-item">
							<a href="#" class="layui-btn layui-btn-sm layui-btn-primary">
								<i class="layui-icon">&#xe64c;</i> 绵阳新闻网
							</a>
						</li>
						<li class="fly-item">
							<a href="#" class="layui-btn layui-btn-sm layui-btn-primary">
								<i class="layui-icon">&#xe64c;</i> 抖音小视频
							</a>
						</li>
					</ul>

				</div>
			</div>
		</div>
	</div>





</div>

<div id="footer" class="fly-footer">
	<p><a href="http://www.miitbeian.gov.cn/" target="_blank">蜀ICP备12345970号</a> 2018 ©
	<a href="http://www.javagood.cn/" target="_blank">zhanyisc.com 出品</a> </p>

</div>


<script type="text/javascript" src="layui/layui.js"></script>

<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

        //…
    });
</script>
</body>
</html>